<template>
  <ScreenLayoutWithMenu title="人力资源分析大屏">
    <div class="screen-grid grid-3x2">
      <ChartCard title="人员增长趋势" grid-area="a">
        <ECharts :option="staffGrowthOption" />
      </ChartCard>
      <ChartCard title="部门分布" grid-area="b">
        <ECharts :option="departmentOption" />
      </ChartCard>
      <ChartCard title="人力指标" grid-area="c">
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-value">1,234</div>
            <div class="stat-label">总人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">89</div>
            <div class="stat-label">本月入职</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">95.2%</div>
            <div class="stat-label">在岗率</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="年龄结构" grid-area="d">
        <ECharts :option="ageStructureOption" />
      </ChartCard>
      <ChartCard title="学历分布" grid-area="e">
        <ECharts :option="educationOption" />
      </ChartCard>
      <ChartCard title="绩效分布" grid-area="f">
        <ECharts :option="performanceOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const staffGrowthOption = ref({})
const departmentOption = ref({})
const ageStructureOption = ref({})
const educationOption = ref({})
const performanceOption = ref({})

onMounted(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月']
  
  staffGrowthOption.value = getLineOption({
    categories: months,
    series: [{
      name: '人数',
      data: [1100, 1120, 1150, 1180, 1200, 1234]
    }]
  })

  departmentOption.value = getPieOption({
    name: '部门',
    data: [
      { value: 350, name: '技术部' },
      { value: 280, name: '销售部' },
      { value: 200, name: '运营部' },
      { value: 180, name: '市场部' },
      { value: 150, name: '人事部' },
      { value: 74, name: '其他' }
    ]
  })

  ageStructureOption.value = getBarOption({
    categories: ['20-25', '26-30', '31-35', '36-40', '40+'],
    series: [{
      name: '人数',
      data: [300, 450, 320, 120, 44]
    }]
  })

  educationOption.value = getPieOption({
    name: '学历',
    data: [
      { value: 450, name: '本科' },
      { value: 380, name: '硕士' },
      { value: 280, name: '专科' },
      { value: 124, name: '其他' }
    ]
  })

  performanceOption.value = getBarOption({
    categories: ['优秀', '良好', '一般', '待改进'],
    series: [{
      name: '人数',
      data: [350, 450, 380, 54]
    }]
  })
})
</script>
